<template>
  <div style="width='100%'">
    <div class="empty-cart" v-show=flag>
      <h2 class="cart-one">购物车</h2>
      <main>
        <span
          ><img
            src="https://hshopb.honorfile.com/nwap/221030101/staticm/img/new-cart-empty.cc2a5c0.png"
            alt=""
        /></span>
        <p>您的购物车没有商品</p>
        <button @click="tohome">去购物</button>
      </main>
      <div class="system-pro-list">
        <p>热销推荐</p>
        <ul>
          <li v-for="(v, index) in hotlist" :key="index">
            <img :src="v.src" alt="" />
            <p class="name">{{ v.name }}</p>
            <p class="price">{{ v.price }}</p>
            <div class="buy" @click="tohave(index)"><van-icon name="cart-o" /></div>
          </li>
        </ul>
      </div>
      <van-tabbar
        id="footer"
        v-model="active"
        active-color="black"
        inactive-color="white"
      >
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" replace to="/second"
          >分类</van-tabbar-item
        >
        <van-tabbar-item icon="shopping-cart-o" replace to="/cart"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item icon="contact" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  data() {
    return {
      hotlist: [],
      flag: true,
      active: 0,
      list: [],
    };
  },
  mounted() {
    this.$http({
      url: " http://localhost:3000/hotgoods",
      method: "GET",
    }).then((res) => {
      this.hotlist = res.data;
    });
  },
  methods: {
    tohome() {
      setTimeout(() => {
        this.$router.push("/myhome");
      }, 1500);
    },
    tohave(index) {
      setTimeout(()=>{
        this.flag = false
         this.$router.push("/cart/shopcart")
      },1500);

      this.$http({
        url: " http://localhost:3000/cart",
        method: "POST",
        data:{
            "sell":'满10减10',
            "src":this.hotlist[index].src,
            "name":this.hotlist[index].name,
            "pz":"幻境星空，5G全网通 8GB+128GB，官方...",
            "activeO":"分期免息",
            "activeT":"积分红包",
            "price":this.hotlist[index].price,
            "num":"1"
        }
      }).then((res) => {
        console.log(res.data);
      }),
        (err) => {
          console.log(err);
        };
    },
  },
};
</script>

<style scoped>
.empty-cart {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: rgb(248, 248, 248);
  width: 100%;
}
.cart-one {
  align-self: start;
  font-size: 1.3rem;
  font-weight: 400;
}
.empty-cart main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}
.empty-cart main span img {
  width: 6.5rem;
  height: 6.5rem;
}
.empty-cart main p {
  font-size: 0.8rem;
  color: rgb(203, 203, 203);
  padding: 0.5rem 0 0;
}
.empty-cart main button {
  width: 5.6875rem;
  height: 1.9375rem;
  border-radius: 1.25rem;
  text-align: center;
  line-height: 1.9375em;
  margin-top: 1.2rem;
  border: 1px solid rgb(231, 231, 231);
  color: #999;
}
.system-pro-list {
  width: 100%;
  margin-top: 4.25rem;
}
.system-pro-list ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: space-between;
  margin-top: 1.625rem;
}
.system-pro-list ul li {
  width: 48%;
  height: 14.6469rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-top: 0.625rem;
  justify-content: space-around;
  position: relative;
}
.system-pro-list ul li img {
  width: 8.4625rem;
  height: 8.4625rem;
}
.system-pro-list ul li .name {
  font-size: 0.8rem;
  color: #888;
}
.system-pro-list ul li .price {
  font-size: 0.8rem;
  font-weight: 700;
}
.system-pro-list ul li .buy {
  position: absolute;
  right: 0.3125rem;
  top: 0.3125rem;
}
#footer {
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}

.van-tabbar-item--active {
  color: white;
  background: linear-gradient(to top, rgb(248, 81, 27), rgb(252, 226, 196));
}
</style>